<template>
  <template v-if="$route.path === '/myExam'">
    <div class="examContent">
      <div class="list">
        <Gridadd
          v-if="listpage.list.length === 0"
          name="暂无考试"
          icon="icon-dongjie"
        />
        <Griddata
          v-for="myExam in listpage.list"
          :key="myExam.myExamId"
        >
          <template #tag>
            <div>
              <el-tag
                size="large"
                v-if="myExam.myExamState == 1"
                type="primary"
                >{{
                  dictStore.getValue("EXAM_STATE", myExam.myExamState)
                }}</el-tag
              >
              <el-tag
                size="large"
                v-if="myExam.myExamState == 2"
                type="success"
                >{{
                  dictStore.getValue("EXAM_STATE", myExam.myExamState)
                }}</el-tag
              >
              <span v-if="myExam.myExamState == 3" class="state imgState">
                <img :src="yitongguo" alt="Logo" class="stateImg" />
              </span>
              <span v-else-if="myExam.myExamState == 4" class="state imgState">
                <img :src="weitongguo" alt="Logo" class="stateImg" />
              </span>
            </div>
          </template>
          <template #title>
            {{ myExam.examName }}
          </template>
          <template #content>
            <CountDown
              v-if="myExam.state === 1"
              :expireTime="
                dayjs(myExam.examStartTime, 'YYYY-MM-DD HH:mm:ss').toDate()
              "
              preTxt="距考试："
            ></CountDown>
            <div
              style="margin-bottom: 10px; margin-top: 10px; text-align: center;font-size:16px"
            >
              考试时间：{{ myExam.examStartTime?.replace(/:\d\d$/, "") }}&nbsp;
              -&nbsp; {{ myExam.examEndTime?.replace(/:\d\d$/, "") }}
            </div>
            <div class="tetsInfo">
              <div style="margin-right: 20px">
                分数：{{ myExam.totalScore || "-" }} /
                {{ myExam.examTotalScore }}
              </div>
              <div :span="12">考试时长：{{ myExam.examPassTime }}分</div>
            </div>

            <div class="btn pass" @click="examIn(myExam)" v-if="myExam.state==3">查看试卷</div>
            <div class="btn" @click="examIn(myExam)" v-else>参加考试</div>
          </template>
        </Griddata>
      </div>
      <div class="page">
        <el-pagination
        v-model:current-page="listpage.curPage"
        v-model:page-size="listpage.pageSize"
        :total="listpage.total"
        background
        layout="prev, pager, next"
        :hide-on-single-page="true"
        @size-change="query"
        @current-change="query"
        @prev-click="query"
        @next-click="query"
      />
      </div>
    </div>
  </template>
  <RouterView v-else></RouterView>
</template>
  
<script lang="ts" setup>
import { reactive, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import http from "@/request";
import dayjs from "dayjs";
import Griddata from "@/components/Griddata.vue";
import { ElMessage } from "element-plus";
import Gridadd from "@/components/Gridadd.vue";
import { useDictStore } from "@/stores/dict";
import CountDown from "@/components/CountDown.vue";

import weitongguo from "@/assets/image/weitongguo.png";
import yitongguo from "@/assets/image/yitongguo.png";

//  定义变量
const dictStore = useDictStore(); // 字典缓存
const route = useRoute();
const router = useRouter();
const queryForm = reactive({
  // 查询表单
  examName: "", // 考试名称
});
const listpage = reactive({
  // 分页列表
  curPage: 1,
  pageSize: 8,
  total: 0,
  list: [] as any[],
});

// 组件挂载完成后，执行如下方法
onMounted(() => {
  query();
});

// 如果是跳转到列表页，重新查询
watch(
  () => route.path,
  (n, o) => {
    if (n === "/myExam") {
      query();
    }
  }
);

// 查询
async function query() {
  const {
    data: { code, data },
  } = await http.post("myExam/listpage", {
    examName: queryForm.examName,
    curPage: listpage.curPage,
    pageSize: listpage.pageSize,
  });

  if (code !== 200) {
    return;
  }

  listpage.list = data.list.map((myExam: any) => {
    return myExam;
  });
  listpage.total = data.total;
}

// 考试进入
async function examIn(myExam: any) {
  if (myExam.state !== 3) {
    let {
      data: { data },
    } = await http.post("login/sysTime", {});
    let curTime = dayjs(data, "YYYY-MM-DD HH:mm:ss").toDate();
    let examStartTim = dayjs(
      myExam.examStartTime,
      "YYYY-MM-DD HH:mm:ss"
    ).toDate();
    if (examStartTim.getTime() > curTime.getTime()) {
      ElMessage.error("考试未开始，请等待...");
      return;
    }
  }

  router.push(`/myExam/paper/${myExam.examId}`);

}
</script>

<style lang="scss">
.el-header {
  display: initial;
}
</style>
<style lang="scss" scoped>
.examContent {
  min-height: calc(100vh - 190px);
}
.page{
  display: flex;
  justify-content: flex-end
}
.list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  .btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    background: linear-gradient(to right, #24b0fb, #1c90fa);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    &:hover {
      background-color: #46a6ff;
    }
  }
  .pass{
    background: linear-gradient(to right, #32c7cd, #32c7cd);
    &:hover {
      background-color: #32c7cd;
    }
  }
  .tetsInfo {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .stateImg {
    width: 50px;
  }
  :deep .el-tag--large {
    font-size: 16px;
  }
  :deep .ant-card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
  }
  :deep(.grid-content) {
    width: 100%;
    .el-col {
      text-align: center;
    }
  }
}
</style>
  